<template>
    <view>
      <!-- 1. 轮播图 -->
      <swiper class="goods-swiper" indicator-dots circular>
        <swiper-item v-for="(item,index) in goodsDetail.pics" :key="item.pics_id">
          <image
            class="goods-swiper-image"
            :src="item.pics_big_url"
            mode="scaleToFill"
            @click="previewImage(index)"
          />
        </swiper-item>
      </swiper>
      <!-- 2. 文字信息 -->
      <view class="goods-info">
        <view class="goods-info-title">
          <view class="goods-info-price">{{  goodsDetail.goods_price }}</view>
          <view class="icon-group">
            <!-- 分享按钮可通过定位放到图标的上方，透明度设置为0 -->
            <u-icon name="share-square" size="44rpx"></u-icon>
            <!-- 小程序没有直接提供分享的 api，页面中需通过按钮组件实现分享功能 -->
            <button open-type="share">分享按钮</button>
          </view>
          <view class="icon-group">
            <u-icon name="star" size="44rpx"></u-icon>
          </view>
        </view>
        <view class="goods-info-name">
          {{ goodsDetail.goods_name }}
        </view>
      </view>
      <!-- uView 间隔槽组件，用一个灰色块隔开两个分区 -->
      <u-gap height="20rpx" bgColor="#F9F9F9"></u-gap>
      <!-- 3. 图文详情 -->
      <view class="goods_introduce">
        <view class="goods_introduce-title">图文详情</view>
        <!-- 富文本组件展示html标签 rich-text -->
        <view v-html="goodsDetail.goods_introduce"
        class="goods_introduce-content">

        </view>
        <!-- <rich-text
          class="goods_introduce-content"
          :nodes="goodsDetail.goods_introduce"
        ></rich-text> -->
      </view>
      <!-- 4. 底部操作栏 -->
      <view class="bottom-bar">
        <view class="bottom-bar-fixed">
          <view class="icon-group">
            <u-icon name="kefu-ermai" color="#333" size="40rpx"></u-icon>
            <view>联系客服</view>
            <button open-type="contact">客服按钮</button>
          </view>
          <navigator
            url="/pages/cart/index"
            open-type="switchTab"
            class="icon-group"
          >
            <u-icon name="shopping-cart" color="#333" size="40rpx"></u-icon>
            <view>购物车</view>
          </navigator>
          <view class="btn">加入购物车</view>
          <view class="btn">立即购买</view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        //查询参数
        queryParams:{},
        //商品详情
        goodsDetail:{}
      }
    },
    onLoad(options){
      console.log(options)
      //接参
      this.queryParams = options
      // 发送请求
      this.getGoodDetail()
      
    },
    methods:{
      async getGoodDetail(){
        const res = await uni.$u.http.get('/goods/detail',{
          params:this.queryParams
        });
        console.log(res);
       this.goodsDetail = res.data.message
      },
      //预览图片
      previewImage(index){
        const urls = this.goodsDetail.pics.map(v => v.pics_big_url)
        uni.previewImage({
          urls,
          current:index
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
  /* 返回上一页按钮 */
  .navigator-back {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 30rpx;
    top: 50rpx;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .goods-swiper {
    width: 750rpx;
    height: 750rpx;
    .goods-swiper-image {
      width: 750rpx;
      height: 750rpx;
    }
  }
  /* 商品文字信息 */
  .goods-info {
    background-color: #fff;
    padding: 20rpx;
    .goods-info-title {
      display: flex;
      padding-bottom: 20rpx;
      .goods-info-price {
        color: #eb4450;
        flex: 1;
        /* 前面的价格符号 */
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
      /* 图标组 */
      .icon-group {
        width: 44rpx;
        height: 44rpx;
        position: relative;
        margin-left: 40rpx;
        /* 图标上方有个定位的按钮 */
        button {
          position: absolute;
          width: 44rpx;
          height: 44rpx;
          left: 0;
          top: 0;
          opacity: 0;
        }
      }
    }
    /* 商品文字 */
    .goods-info-name {
      font-size: 30rpx;
      line-height: 1.5;
    }
  }
  .goods_introduce {
    .goods_introduce-title {
      font-size: 28rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1rpx solid #eee;
    }
    .goods_introduce-content {
      /* 通过类名给富文本图片修改样式 */
      .img {
        vertical-align: middle;
      }
    }
  }
  
  /* 底部操作栏 */
  .bottom-bar {
    /* 占位用 */
    height: 100rpx;
    /* 定位的操作栏 */
    .bottom-bar-fixed {
      display: flex;
      align-items: center;
      height: 94rpx;
      background-color: #fff;
      border-top: 1px solid #ddd;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      /* 注意这里客服图标和按钮的组合处理 */
      .icon-group {
        flex: 1;
        font-size: 22rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        button {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
        }
      }
      .btn {
        width: 196rpx;
        height: 60rpx;
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fcaa23;
        color: #fff;
        margin: 0 10rpx;
        font-size: 26rpx;
        &:last-child {
          background-color: #ea4350;
        }
      }
    }
  }
  </style>
  
  